<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box" id="test"  style="font-size: 20px;color: greenyellow;">
        <p>1</p>
        <p>12</p>
        <p>123</p>
    </div>
    <script>
        /* 
            克隆节点 

            语法:
                节点.cloneNode(参数)

                参数默认是false 表示不克隆后代
                参数是true  表示克隆后代

            作用:
                把该节点复制一份一模一样的 

                (属性 和样式 都一模一样)
        
        */


        var divele = document.querySelector('div');

        // var mydiv = divele.cloneNode();// 参数 false 

        // document.body.appendChild(mydiv);  // 仅克隆了第一级 


        var mydiv = divele.cloneNode(true);// 参数 true 

        document.body.appendChild(mydiv);  // 所有级别全克隆

        var mydiv1 = divele.cloneNode(true);// 参数 true 

        document.body.appendChild(mydiv1);  // 所有级别全克隆


    </script>
</body>
</html>